<template>
	<view class="pre-order-detail">
		<view class="card">
			<image :src="preOrderDetail.avatar" mode="widthFix"></image>
			<view class="infos">
				<view class="top">
					<image :src="preOrderDetail.avatar" class="avatar"></image>
					<view class="right">
						<view class="top-right">
							<text class="name">
								<text class="nick">{{ preOrderDetail.username }}</text>
								<text :class="['type',preOrderDetail.level==1?'golden':'silver']">{{prize}}</text>
							</text>
							<text class="price">￥{{ preOrderDetail.price }}/每次</text>
						</view>
						<view class="star">
							<text class=" iconfont icon-shoucang1"></text>
							<text class="price"> {{ preOrderDetail.star }}</text>
						</view>						
					</view>
					
				</view>
				<view class="info">
					<text>学历：{{ preOrderDetail.school }}</text>
					<text>属相：{{ preOrderDetail.birth_year }}</text>
					<text>民族：{{ preOrderDetail.nation }}</text>
					<text>年龄：{{ preOrderDetail.age }}</text>
					<text>经验：{{ preOrderDetail.experience }}</text>
					<text>籍贯：{{ preOrderDetail.native_place }}</text>
				</view>
			</view>
		</view>
		<view class="certify">
			<view class="title">
				<text>证书证件</text>
			</view>
			<view class="list">
				<block v-for="(v,index) in preOrderDetail.certificate" :key="index">
					<CardItem v-if="v=='保证金已缴纳'" icon="iconfont icon-time" name="保证金已缴纳"></CardItem>
					<CardItem v-if="v=='身份证'" icon="iconfont icon-time" name="身份证"></CardItem>
					<CardItem v-if="v=='体检报告'" icon="iconfont icon-time" name="体检报告"></CardItem>
					<CardItem v-if="v=='执业证书'" icon="iconfont icon-time" name="执业证书"></CardItem>
					<CardItem v-if="v=='其他'" icon="iconfont icon-time" name="其他"></CardItem>
					<!-- <CardItem ></CardItem> -->
					<!-- <CardItem ></CardItem> -->
					<!-- <view class="item" v-if="v==1">
						<text class="iconfont icon-time"></text>
						<text>保证金已缴纳</text>
					</view>
					<view class="item" v-if="v==2">
						<text class="iconfont icon-time"></text>
						<text>身份证</text>
					</view>
					<view class="item" v-if="v==3">
						<text class="iconfont icon-time"></text>
						<text>体检报告</text>
					</view>
					<view class="item" v-if="v==3">
						<text class="iconfont icon-time"></text>
						<text>职业证书</text>
					</view>
					<view class="item" v-if="v==3">
						<text class="iconfont icon-time"></text>
						<text>其他</text>
					</view> -->
				</block>
				
				
			</view>
			<button @click="goPreOrder">马上预约</button>
		</view>
		<view class="fix-bar">
			<uni-icons type="shop" size="20"></uni-icons>
			<uni-icons type="redo" size="20"></uni-icons>
			<uni-icons :type="isLiked?'star-filled':'star'" :color="isLiked?'red':''" size="20" @click="myFav(preOrderDetail.id)"></uni-icons>
		</view>		
	</view>
</template>

<script>
	import { GetPreOrderDetail,AddMyFav,GetFavStatus,AddMyLog } from '../../api/index.js'
	export default {
		data() {
			return {
				preOrderDetail:{},
				isLiked:false,
				id:0
				
			};
		},
		onLoad(options) {
			if(options.id){
				this.getPreOrderDetail(options.id)
				this.getFavStatus(options.id)
			}
			
		},
		computed:{
			prize(){
				let lv = this.preOrderDetail.level
				// switch(lv){
				// 	case 0: 
				// 		''
				// 		break
				// 	case 1:
				// 		'金牌'
				// 		break
				// 	case 2:
				// 		'银牌'
				// 		break
					
				// }
				if(lv==1){
					return '金牌'
				}
				if(lv==2){
					return '银牌'
				}else{
					return ''
				}
			}
		},
		methods:{
			async getPreOrderDetail(id){
				const { data:res } =await GetPreOrderDetail(id)
				console.log(res,'detail')
				res.data[0].certificate = res.data[0].certificate.split(',')
				console.log(res,'ddd')
				this.preOrderDetail = res.data[0]
				let paramsData = {
					hid:id,
					uid:JSON.parse(uni.getStorageSync('userinfo')).id,
					type:1
				}
				const {data:ress} = await AddMyLog(paramsData)
				console.log(ress,'r')
			},
			goPreOrder(){
				uni.navigateTo({
					url:'/subPackage/PreOrderInfo/PreOrderInfo?info='+JSON.stringify(this.preOrderDetail)
				})
			},
			async getFavStatus(id){
				const {data:res} = await GetFavStatus(id)
				console.log(res,'favstatus')
				if(res.status!==0){
					this.isLiked = false
				}else{
					this.isLiked = true
					this.id = res.data.id
				}
			},
			// 收藏
			async myFav(hid){
				// this.getFavStatus(hid)
				// if(this.isLiked){
					
				// }
				let paramsData = {
					hid,
					id:this.id,
					is_liked:this.isLiked?0:1
				}
				const {data:res} = await AddMyFav(paramsData)
				console.log(res,'fav')
				if(res.status==0){
					this.isLiked = !this.isLiked
				}
				// this.getFavStatus(hid)
			}
		}
	}
</script>

<style lang="scss">
.pre-order-detail{
	width: 100%;
	text-align: center;
	padding: 0 40rpx;
	box-sizing: border-box;
	.card{
		width: 100%;
		background: #fff;
		text-align: center;
		margin-bottom: 20rpx;
		border-radius: 30rpx;
		image{
			width: 80%;
			height: 300rpx;
			
		}
		.infos{
			padding: 20rpx;
			.top{
				display: flex;
				.avatar{
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
				.right{
					width: 100%;
					margin-left: 10rpx;
					.top-right{
						padding: 10rpx;
						width: 100%;
						display: flex;
						justify-content: space-between;
						// border: 1px solid #000;
						.name{
							.nick{
								font-weight: bold;
								margin-right: 40rpx;
							}
							.type{
								
								padding: 4rpx 6rpx;
								border-radius: 6rpx;
								font-size: 24rpx;
								&.golden{
									background: orange;
									color: gold;
								}
								&.silver{
									background: #f5f5f5;
									color: #888;
								}
							}
						}
						.price{
							color: red;
							font-size: 28rpx;
						}
						
					}
					.star{
						display: flex;
						align-items: center;
						color: orange;
						.iconfont{
							margin-right: 6rpx;
						}
						
					}
				}
			}
			.info{
				width: 100%;
				display: flex;
				justify-content: space-evenly;
				flex-wrap: wrap;
				text{
					margin: 10rpx 20rpx;
				}
			}
		}
	}
	.certify{
		width: 100%;
		background: #fff;
		padding: 30rpx 0;
		border-radius: 30rpx;
		.title{
			font-weight: bold;
			text-align: left;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			// justify-content: center;
			// .item{
			// 	width: 30%;
			// 	display: flex;
			// 	flex-direction: column;
			// 	align-items: center;
			// 	justify-content: center;
			// 	margin: 20rpx 0;
			// 	.iconfont{
			// 		font-size: 50rpx;
			// 		margin-bottom: 10rpx;
			// 	}
			// }
		}
		button{
			width: 60%;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			background: #1afa29;
			color: #fff;
			margin: 40rpx auto 40rpx auto;
		}
	}
	.fix-bar{
		// border: 1px solid #000;
		height: 220rpx;
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 50rpx;
		bottom: 100rpx;
		justify-content: space-evenly;
		.uni-icons{
			// padding: 20px;
		}
	}
}
</style>
